
<template>
    <div class="search">
        <Row>
            <Col>
                <Card>
                    <Tabs :animated="false" @on-click="changeTab">
                        <TabPane label="回调地址" name="login">
                        </TabPane>
                    </Tabs>
                    <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
                        <Form-item label="搜索地址">
                            <Input type="text" v-model="searchForm.sort" clearable placeholder="客户id查询" style="width: 200px"/>
                        </Form-item>
                        <Form-item style="margin-left:-35px;" class="br">
                            <Button @click="handleSearch"  type="primary" icon="ios-search">搜索</Button>
                            <Button @click="handleReset" >重置</Button>
                        </Form-item>
                    </Form>
                    <Row class="operation">
                        <Button @click="addSystem" type="primary" icon="md-add">添加回调地址</Button>
                        <Button @click="delAll" icon="md-trash">批量删除</Button>
                        <Button @click="getLogList" icon="md-refresh">刷新</Button>
                        <circleLoading v-if="operationLoading"/>
                    </Row>
                    <Row>
                        <Alert show-icon>
                            已选择 <span class="select-count">{{selectCount}}</span> 项
                            <a class="select-clear" @click="clearSelectAll">清空</a>
                        </Alert>
                    </Row>
                    <Row>
                        <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
        <Modal :title="modalTitle" v-model="roleModalVisible" :mask-closable='false' :width="500">
            <Form ref="editSubsystemNews" :model="editSubsystemNews" :label-width="100" :rules="editSubsystemNewsValidate">
                <FormItem label="客户id" prop="clientId">
                    <Input v-model="editSubsystemNews.clientId"  placeholder="客户id"/>
                </FormItem>

                <FormItem label="客户端秘钥" prop="clientSecret">
                    <Input v-model="editSubsystemNews.clientSecret" type="password" placeholder="客户端秘钥"/>
                </FormItem>

                <FormItem label="授权访问范围" prop="authorizedGrantTypes">
                    <Input v-model="editSubsystemNews.scope" disabled placeholder="授权访问范围"/>
                </FormItem>

                <FormItem label="请求方式" prop="webServerRedirectUri">
                    <Input v-model="editSubsystemNews.authorizedGrantTypes" disabled  placeholder="请求方式"/>
                </FormItem>

                <FormItem label="回调路径" prop="scope">
                    <Input v-model="editSubsystemNews.webServerRedirectUri"  placeholder="回调路径"/>
                </FormItem>
                <FormItem label="自动授权" prop="autoapprove">
                    <Input v-model="editSubsystemNews.autoapprove" disabled placeholder="自动授权"/>
                </FormItem>


            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelRole">取消</Button>
                <!--添加链接提交-->
                <Button type="primary" :loading="submitLoading" @click="submitNew">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {getClientDetails,delByIds,getClientId,insertOrUpdate} from "@/api/singlePoint.js";
    import circleLoading from "@/views/my-components/circle-loading.vue";
    export default {
        name: "callback-manage",
        components: {
            circleLoading
        },
        data() {
            return {
                submitLoading: false,
                modalTitle:'',
                roleModalVisible:false,
                editSubsystemNews: {
                    oldClientId:'',
                    clientId:'',
                    clientSecret:'',
                    authorizedGrantTypes:'authorization_code',
                    webServerRedirectUri:'',
                    scope:'all',
                    autoapprove:'true'
                },
               editSubsystemNewsClear:{
                    oldClientId:'',
                    clientId:'',
                    clientSecret:'',
                    authorizedGrantTypes:'authorization_code',
                    webServerRedirectUri:'',
                    scope:'all',
                   autoapprove:'true'
                },
                editSubsystemNewsValidate: {
                    clientId: [
                        { required: true, message: "客户id不能为空", trigger: "blur" }
                    ],
                    clientSecret: [
                        { required: true, message: "客户端秘钥不能为空", trigger: "blur" }
                    ],
                    scope: [
                        { required: true, message: "授权访问范围不能为空", trigger: "blur" }
                    ],
                    authorizedGrantTypes: [
                        { required: true, message: "请求方式不能为空", trigger: "blur" }
                    ],
                    webServerRedirectUri: [
                        { required: true, message: "回调路径不能为空", trigger: "blur" }
                    ],
                    autoapprove: [
                        { required: true, message: "自动授权不能为空", trigger: "blur" }
                    ],
                },
                loading: true,
                operationLoading: false,
                selectList: [],
                selectCount: 0,
                selectDate: null,
                searchKey: "",
                searchForm: {
                    pageNumber: 1,
                    pageSize: 10,
                    sort: "",
                    order: "desc"
                },
                columns: [
                    {
                        type: "selection",
                        width: 60,
                        align: "center",
                    },
                    {
                        type: "index",
                        width: 60,
                        align: "center",

                    },
                    {
                        title: "客户id",
                        width: 120,
                        key: "clientId",

                    },
                    {
                        title: "客户端秘钥",
                        key: "clientSecret",
                        width: 100,
                        render: (h, params) => {
                            let secret='********'
                            return h('div',secret);
                        }
                    },
                    {
                        title: "授权访问范围",
                        width: 140,
                        key: "scope",
                    },
                    {
                        title: "请求方式",
                        width: 160,
                        key: "authorizedGrantTypes",
                    },
                    {
                        title: "回调路径",
                        key: "webServerRedirectUri",

                    },
                    {
                        title: "自动授权",
                        width: 100,
                        key: "autoapprove",
                        align:"center",

                    },
                    {
                        title: "操作",
                        key: "action",
                        width: 160,
                        align: "center",
                        render: (h, params) => {
                            let role=params.row;
                            return h("div", [
                                h(
                                    "Button",
                                    {
                                        style:{
                                            marginRight:'10px'
                                        },
                                        props: {
                                            type: "primary",
                                            size: "small"
                                        },
                                        on: {
                                            click: () => {
                                                this.modalTitle = "编辑回调地址";
                                                this.roleModalVisible = true
                                                this.editSubsystemNews={
                                                    oldClientId:role.clientId,
                                                    authorizedGrantTypes: role.authorizedGrantTypes,
                                                    autoapprove: role.autoapprove,
                                                    clientId: role.clientId,
                                                    clientSecret:role.clientSecret,
                                                    scope: role.scope,
                                                    webServerRedirectUri: role.webServerRedirectUri,
                                                }
                                            }
                                        }
                                    },
                                    "编辑"
                                ),
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "error",
                                            size: "small"
                                        },
                                        on: {
                                            click: () => {
                                                this.remove(params.row);
                                            }
                                        }
                                    },
                                    "删除"
                                )
                            ]);
                        }
                    }
                ],
                data: [],
                total: 0
            };
        },
        methods: {
            init() {//ok
                this.getLogList();
            },
            changeTab(v) {//tab 切換   ok
                if (v == "login") {
                    this.searchForm.type = 1;
                }
            },
            changePage(v) {//当前页ok
                this.searchForm.pageNumber = v;
                this.getLogList();
                this.clearSelectAll();
            },
            changePageSize(v) {//总页
                this.searchForm.pageSize = v;
                this.getLogList();
            },
            handleSearch() {//ok
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                    this.getListClient();

            },
            getLogList() {//ok
                this.loading = true;
                getClientDetails(this.searchForm).then(res=>{
                    this.loading = false;
                    if (res.success == true) {
                    this.data = res.result.records;
                        this.total = res.result.total;
                    }
                })
            },
            getListClient() {//ok
                this.loading = true;
                let sort={
                    key:this.searchForm.sort
                }
                getClientId(sort).then(res=>{
                    this.loading = false;
                    if (res.success == true) {
                        this.data = res.result.records;
                        this.total = res.result.total;
                    }
                })
            },
            handleReset() {//ok
                this.searchForm.sort= "";
                this.selectDate = null;
                this.getLogList();
            },
            remove(v) {//删除
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除该条数据?",
                    onOk: () => {
                        this.operationLoading = true;
                        delByIds(v.clientId).then(res => {
                            this.operationLoading = false;
                            if (res.success == true) {
                                this.$Message.success("删除成功");
                                this.init();
                            }
                        });
                    }
                });
            },
            clearSelectAll() {
                this.$refs.table.selectAll(false);
            },
            changeSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            changeSort(e) {
                this.searchForm.sort = e.key;
                this.searchForm.order = e.order;
                if (e.order == "normal") {
                    this.searchForm.order = "";
                }
                this.getLogList();
            },
            delAll() {
                if (this.selectCount <= 0) {
                    this.$Message.warning("您还未选择要删除的数据");
                    return;
                }
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
                    onOk: () => {
                        let ids = "";
                        this.selectList.forEach(function(e) {
                            ids += e.clientId + ",";
                        });
                        ids = ids.substring(0, ids.length - 1);
                        this.operationLoading = true;
                        delByIds(ids).then(res => {
                            this.operationLoading = false;
                            if (res.success == true) {
                                this.$Message.success("删除成功");
                                this.clearSelectAll();
                                this.init();
                            }
                        });
                    }
                });
            },
            cancelRole() {
                this.editSubsystemNews=this.editSubsystemNewsClear
                this.roleModalVisible = false;
            },
            addSystem() {

                this.modalTitle = "添加回调地址";
                this.roleModalVisible = true;
            },
            submitNew(){
                this.$refs.editSubsystemNews.validate((valid) => {
                    if (valid) {
                        insertOrUpdate(this.editSubsystemNews).then(res=>{
                             if(res.success){
                                 this.editSubsystemNews=this.editSubsystemNewsClear;
                                 this.roleModalVisible = false;
                                 this.searchForm.pageNumber = 1;
                                 this.searchForm.pageSize = 10;
                                 this.getLogList();
                                 this.$Message.success(res.message)
                             }else {
                                 this.$Message.error(res.message);
                             }
                        })
                    } else {
                        this.$Message.error('请正确填写表单字段!');
                    }
                })

            }
        },
        mounted() {
            this.init();
        }
    };
</script>
<style scoped lang="less">
    @import "callbackManage.less";
</style>
